import { getUserInfo, getUserGrade } from '../../utils/userInfo';
import Notify from '@vant/weapp/notify/notify';
import Dialog from '@vant/weapp/dialog/dialog';
import Toast from '@vant/weapp/toast/toast';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userAvatar: '../../images/default-avatar.png', // 用户头像
    desc1: '请选择', // 年级描述1
    desc2: '请选择', // 年级描述2
    showPopup: false, // 底部弹出层
    showDialog: false, // Dialog弹出框
    dialogIptVal: '', // 输入框的value值
    mainActiveIndex: 0,
    activeId: null,
    treeItems: Array,
    editData: {
      text: '编辑',
      onEvent: 'edit',
      showAddView: false
    },
    classArr: [
      {
        name: '语文',
        classImgUrl: 'https://s2.loli.net/2022/02/13/olYgQht1vJw9kMa.png',
        qidArr: [],
      },
      {
        name: '数学',
        classImgUrl: 'https://s2.loli.net/2022/02/13/p8ksQTPytfArYRz.png',
        qidArr: [],
      },
      {
        name: '英语',
        classImgUrl: 'https://s2.loli.net/2022/02/13/76txpwrqSXMUkHd.png',
        qidArr: [],
      },
    ]
  },

  // 弹出层
  onShowPopup() {
    if (getUserInfo()) {
      this.setData({
        showPopup: true
      })
    } else {
      // 未登录就请先登录
      Notify({ type: 'danger', message: '请先登录' });
    }
  },

  onClosePopup() {
    this.setData({
      showPopup: false
    })
  },

  // TreeSelect 分类选择器
  // 点击左侧
  onClickNav({ detail = {} }) {
    this.setData({
      mainActiveIndex: detail.index || 0,
    });
    // console.log(this.data.mainActiveIndex);
  },

  // 点击右侧
  onClickItem({ detail = {} }) {
    const activeId = this.data.activeId === detail.id ? null : detail.id;
    this.setData({ activeId });
    // console.log(this.data.activeId);
  },

  // bindTapTreeItems 点击选好了
  bindTapTreeItems() {
    const { mainActiveIndex, activeId, treeItems } = this.data;
    // 将选中的年级分类存入缓存，方便两个页面同步
    const gradeDesc = {
      desc1: treeItems[mainActiveIndex].text,
      desc2: treeItems[mainActiveIndex].children[activeId].text
    }
    wx.setStorageSync('gradeDesc', gradeDesc);
    /* wqb_grade数据库操作，将 desc1 和 desc2 传入数据 
      找到相对应年级下的，class 课程数据，然后再进行渲染
    */
    const { _id } = getUserGrade(); // 获取 gid
    wx.cloud.callFunction({
      name: 'reqGradeAPI',
      data: {
        scene: 'GET_CLASS', // 场景值，必传
        gradeDesc, // 年级描述
        gid: _id,
      },
      complete: res => {
        console.log('callFunction test result: ', res);
        wx.setStorageSync('classArr', res.result)
        this.setData({
          showPopup: false
        }, () => {
          this.onLoad();
        })
      },
    })
  },

  // 点击右上角编辑
  edit() {
    const gradeDesc = wx.getStorageSync('gradeDesc');
    if (getUserInfo()) {
      if (gradeDesc) {
        this.setData({
          editData: {
            text: '完成',
            onEvent: 'passed',
            showAddView: true
          },
        })
      } else {
        Notify({ type: 'warning', message: '请先选择年级' });
      }
    } else {
      // 未登录就请先登录
      Notify({ type: 'danger', message: '请先登录' });
    }
  },

  // 点击右上角完成
  passed() {
    this.setData({
      editData: {
        text: '编辑',
        onEvent: 'edit',
        showAddView: false
      },
    })
  },

  // 点击添加课程
  onAddClass() {
    this.setData({
      showDialog: true,
    })
  },

  // 输入框值改变时事件
  dialogIptInput(e) {
    this.setData({
      dialogIptVal: e.detail.value,
    })
  },

  // 点击弹框，添加课程
  onDialogConfirm() {
    const { dialogIptVal } = this.data;
    /* 数据库操作，将需要添加的课程，以提示框的形式进行添加 */
    const gradeDesc = wx.getStorageSync('gradeDesc');
    const { _id } = getUserGrade(); // 获取 gid
    wx.cloud.callFunction({
      name: 'reqGradeAPI',
      data: {
        scene: 'ADD_CLASS', // 场景值，必传
        gradeDesc, // 年级描述，必传
        gid: _id, // gid，必传
        className: dialogIptVal, // 课程名字
      },
      complete: res => {
        console.log('callFunction test result: ', res);
        const { classArr, isExistClassName } = res.result;
        if (isExistClassName) {
          // 添加课程失败，因为已经有存在的课程了
          Toast.fail('添加失败，此课程已经存在');
        } else {
          wx.setStorageSync('classArr', classArr);
          this.onLoad();
        }
      },
    })
    this.setData({
      dialogIptVal: '',
    })
  },

  // 取消Dialog
  onDialogClose() {
    this.setData({
      dialogIptVal: '',
    })
  },

  // 删除课程，获取课程名和下标，因为下标和数据库里是对应的，直接使用下标删除好了
  onDelClass(e) {
    console.log(e.currentTarget.dataset);
    const { id } = e.currentTarget.dataset;
    /* 数据库操作，将需要添加的课程，以提示框的形式进行添加 */
    const gradeDesc = wx.getStorageSync('gradeDesc');
    const { _id } = getUserGrade(); // 获取 gid
    Dialog.confirm({
      title: '确定删除此课程吗？',
    })
      .then(() => {
        wx.cloud.callFunction({
          name: 'reqGradeAPI',
          data: {
            scene: 'DEL_CLASS', // 场景值，必传
            gradeDesc, // 年级描述，必传
            gid: _id, // gid，必传
            index: id, // 要删除的下标
          },
          complete: res => {
            console.log('callFunction test result: ', res);
            const { qidArrLength, classArr } = res.result;
            if (qidArrLength === 0) {
              wx.setStorageSync('classArr', classArr);
              this.onLoad();
            } else {
              // 删除课程失败，因为课程里面的题目还没有清空
              Toast.fail('删除失败，请清空课程里的题目');
            }
          },
        })
      })
      .catch(() => {
        // on cancel
      });
  },

  // 获取此课程下的题目总数，跳转页面
  onGetClassQuestion(e) {
    if (getUserInfo()) {
      const { name } = e.currentTarget.dataset;
      const gradeDesc = JSON.stringify(wx.getStorageSync('gradeDesc'));
      // 跳转至当前课程，所在的错题页
      wx.navigateTo({
        url: `../../packageB/pages/classCategoryList/classCategoryList?className=${name}&gradeDesc=${gradeDesc}`,
      })
    } else {
      // 未登录就请先登录
      Notify({ type: 'danger', message: '请先登录' });
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const { desc1, desc2 } = wx.getStorageSync('gradeDesc');
    const classArr = wx.getStorageSync('classArr');
    if (desc1 && desc2) {
      this.setData({
        desc1,
        desc2,
      })
    };
    if (classArr) {
      this.setData({
        classArr,
      })
    };
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 获取用户信息
    if (getUserInfo()) {
      const { avatar } = getUserInfo();
      const { grade } = getUserGrade();
      this.setData({
        userAvatar: avatar,
        treeItems: grade
      });
      this.onLoad(); // 显示desc
      // this.bindTapTreeItems()
    } else {
      // 未登录就请先登录
      Notify({ type: 'danger', message: '请先登录' });
    };
    // 这里用于显示，添加错题后，题目数量的变化
    const { _id } = getUserGrade(); // 获取 gid
    const gradeDesc = wx.getStorageSync('gradeDesc');
    if (gradeDesc) {
      wx.cloud.callFunction({
        name: 'reqGradeAPI',
        data: {
          scene: 'GET_CLASS', // 场景值，必传
          gradeDesc, // 年级描述
          gid: _id,
        },
        complete: res => {
          console.log('callFunction test result: ', res);
          wx.setStorageSync('classArr', res.result)
          this.setData({
            classArr: res.result,
          })
        },
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.setData({
      showPopup: false
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})